<template>
  <div class="demo-4">
    <div class="Loginbody">
      <!-- <section class="main" v-if="isLoading" style=" position: absolute; left:50%; top:50%; transform:translate(-50%,-50%);">
        <div class="wrapper">
          <div class="inner">
            <span>L</span>
            <span>o</span>
            <span>a</span>
            <span>d</span>
            <span>i</span>
            <span>n</span>
            <span>g</span>
          </div>
        </div>
      </section> -->
      <div class="LoginBg">

        <div class="loginConent">
          <h2 style="color: #fff; text-align: center">后台管理系统</h2>
          <el-form ref="form" :model="form" label-position="left" label-width="auto" class="loginForm" :rules="rules"
            @keyup.enter.native="submitForm('form')">
            <el-form-item label="登录名" prop="name">
              <el-input v-model="form.name" placeholder="请输入登录名"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pass">
              <el-input type="password" v-model="form.pass" autocomplete="off" placeholder="请输入密码" show-password></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="code">
              <el-input type="text" v-model="form.code" autocomplete="off" placeholder="请输入验证码" maxlength="6"
                style="width:70%;float:left" ></el-input>

              <span v-html="url" style="width:28%; height: 40px;cursor:pointer;  " @click="Refresh"></span>
            </el-form-item>
            <div style="margin: 0 auto; position: absolute; left: 47%">
              <el-button type="primary" style="margin-left: 0 !important" @click="submitForm('form')">登录</el-button>
            </div>

          </el-form>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import {
    ApiLogin,
    ApiGetCaptcha
  } from "../../api/api";

  export default {
    name: "Login",
    data() {
      return {
        isLoading: true,
        url: '',
        form: {
          name: "",
          pass: "",
          code: ""
        },
        rules: {
          name: [{
            trigger: "blur",
            required: true,
            message: "请输入用户名",
          }, ],
          pass: [{
            trigger: "blur",
            required: true,
            message: "请输入密码",
          }, ],
          code: [{
            trigger: "blur",
            required: true,
            message: "请输入验证码",
          }, ],
        },
      };
    },


    created() {
      // setTimeout(() => {
      //   this.isLoading = false;
      // }, 100000);
      this.Refresh()
    },
    methods: {
      Refresh() {
        var datetime = new Date().getTime();
        ApiGetCaptcha({
          datetime
        }).then(res => {

          this.url = res.data
        })
      },

      submitForm(form) {
        this.$refs[form].validate((valid) => {
          if (valid) {
            ApiLogin({
                username: this.form.name,
                password: this.form.pass,
                code: this.form.code,
              })
              .then((res) => {
                if (res.code == 200) {
                  this.$message({
                    message: `欢迎你，${this.form.name}`,
                    type: "success",
                  });
                  localStorage.setItem("token", res.token);
                  this.$router.push("/home");
                } else {
                  this.Refresh()
                }
              })
              .catch((err) => {
                this.$message(err.message);

              });
          }
        });
      },
    },
  };

</script>

<style scoped>
  .Loginbody {
    position: fixed;
    width: 100%;
    height: 100%;
    /* background: #000; */
  }

  .LoginBg {
    background: url("../../../static/bg/loginBg.jpg") no-repeat 100% 100%;
    position: fixed;
    background-size: cover;
    width: 100%;
    height: 100%;
  }

  .loginForm>>>.el-form-item__label {
    color: #fff;
  }

  .loginConent {
    width: 500px;
    margin: 0 auto;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    position: absolute;
  }

</style>
